<div id="menu<?php echo $uniqid;?>">
    <div id="wechatMenu" v-cloak @click.stop="menuHide">
        <div class="wechat-menu-title">
            <div style="margin-right: 20px;">菜单名称</div>
            <el-input v-model="menuTitle" size="small" placeholder="请输入菜单名称"></el-input>
        </div>
        <div class="wechat-menu-body">
            <div class="body-left">
                <div class="left-tip">
                    <i class="el-icon-rank margin-right-5" style="font-size: 8px;"></i>
                    可直接拖动菜单排序
                </div>
                <div class="left-bottom">
                    <div class="wechat-menu-icon display-flex">
                        <img src="/static/images/wechat/code.png">
                    </div>
                    <!-- 拖动组件 -->
                    <draggable :list="menuData" v-bind="$attrs" class="wechat-menu-item" :options="{animation:100}">
                        <div v-for="(item,index) in menuData" :key="index"
                             class="draggable-item display-flex cursor-pointer" @click.stop="menuSelect(index,null)"
                             :class="item.selected?'wechat-menu-active':''">
                            <span v-if="item.sub_button.length>0" style="margin-right: 6px;">≡</span>{{item.name}}
                            <div v-if="item.sub_button" class="wechat-menu-add-body" :class="item.show?'wechat-menu-add-show':''"
                                 :style="{'border-bottom':item.sub_button.length>=5?'1px solid #E7E7EB':'none'}">
                                <div>
                                    <draggable :list="item.sub_button" v-bind="$attrs" :options="{animation:500}">
                                        <div class="wechat-menu-item-add-2 one-ellipsis" v-for="(it,idx) in item.sub_button"
                                             :key="idx" @click.stop="menuSelect(index,idx)"
                                             :class="it.selected?'wechat-menu-active':''">
                                            {{it.name}}
                                        </div>
                                    </draggable>
                                    <div class="wechat-menu-item-add-2 wechat-menu-item-add-2s cursor-pointer"
                                         v-if="item.sub_button.length<5" @click.stop="addMenu(index,2)">
                                        <i class="el-icon-plus"></i>
                                    </div>
                                </div>
                            </div>

                        </div>
                        <div class="wechat-menu-item-add display-flex cursor-pointer" v-if="menuData.length<3"
                             @click.stop="addMenu(null,1)">
                            <i class="el-icon-plus"></i>
                        </div>
                    </draggable>
                </div>
            </div>
            <div class="body-right">
                <div class="body-right-content" v-if="rightShow" @click.stop="menuShow">
                    <div class="right-title">
                        <div class="cursor-pointer">添加<span v-if="selectLevel==2">子</span>菜单</div>
                        <div class="delete-btn cursor-pointer" @click.stop="delMenu()">
                            删除菜单
                        </div>
                    </div>
                    <div class="select-body">
                        <el-form ref="rightData" :model="rightData" label-width="106px">
                            <el-form-item :label="selectLevel==2?'子菜单名称':'菜单名称'">
                                <div class="select-tip">
                                    <el-input v-model="rightData.name" @keyup="limitLength()"></el-input>
                                </div>
                            </el-form-item>
                            <el-form-item style="margin-top:-20px">
                                <div class="select-tip">
                                    <div class="tip" v-if="selectLevel==1">菜单名称字数不多于4个汉字或8个字母</div>
                                    <div class="tip" v-if="selectLevel==2">菜单名称字数不多于8个汉字或16个字母</div>
                                </div>
                            </el-form-item>
                            <div v-if="(selectLevel==1 && rightData.sub_button==0) || selectLevel==2">
                                <el-form-item :label="selectLevel==2?'子页面内容':'页面内容'">
                                    <el-radio-group v-model="rightData.type" @change="changeRadio">
                                        <el-radio label="view">跳转网页</el-radio>
                                        <el-radio label="miniprogram">跳转小程序</el-radio>
                                        <el-radio label="click">回复素材</el-radio>
                                    </el-radio-group>
                                </el-form-item>
                                <div v-if="rightData.type=='click'">
                                    <el-form-item label="消息类型">
                                        <el-radio-group v-model="rightData.media_type" @change="typeChange">
                                            <el-radio label="news">图文消息</el-radio>
                                            <el-radio label="image">图片</el-radio>
                                            <el-radio label="video">视频</el-radio>
                                            <el-radio label="voice">音频</el-radio>
                                            <el-radio label="text">文本</el-radio>
                                            <el-radio label="link">链接</el-radio>
                                        </el-radio-group>
                                    </el-form-item>
                                    <el-form-item label="消息内容：" prop="media_id" v-if="rightData.media_type">
                                        <div class="display-flex">
                                            <div style="flex: 1;">
                                                <el-select style="position: relative;" v-model="rightData.media_id"
                                                           @change="selectChange">
                                                    <el-option v-for="item in options" :key="item.media_id"
                                                               :label="item.title" :value="item.media_id+''">
                                                        <div class="display-flex">
                                                            <img style="width: 30px;
                                                    height: 30px;margin-right:20px"
                                                                 :src="item.thumb_url"
                                                                 v-if="rightData.media_type!='voice' && rightData.media_type!='text' && rightData.media_type!='link'">
                                                            <img style="width: 30px;
                                                    height: 30px;margin-right:20px" :src="item.image"
                                                                 v-if="rightData.media_type=='link'">
                                                            <div class="ellipsis-item" style="width: 60px;"
                                                                 v-if="rightData.media_type=='text' || rightData.media_type=='link'">
                                                                {{ item.media_id }}</div>
                                                            <div class="ellipsis-item" style="width: 100px;">
                                                                {{ item.title }}
                                                            </div>
                                                            <div class="ellipsis-item" style="flex: 1;"
                                                                 v-if="rightData.media_type!='text' && rightData.media_type!='link'">
                                                                {{ item.media_id }}</div>
                                                            <div class="ellipsis-item" style="flex: 1;"
                                                                 v-if="rightData.media_type=='text'">
                                                                {{ item.thumb_url }}</div>
                                                        </div>
                                                    </el-option>
                                                    <div class="text-center display-flex"
                                                         style="position: sticky;background: #fff;height:32px;top:0;z-index:1;justify-content: center;">
                                                        <el-pagination class="pagination" :page-sizes="[20]"
                                                                       :current-page="selectCurrentPage" :total="selectTotalPage"
                                                                       layout="total, prev, pager,next, jumper" pager-count="20"
                                                                       @size-change.stop="selectSizeChange"
                                                                       @current-change="selectCurrentChange" />
                                                        </el-pagination>
                                                        <div class="theme-color cursor-pointer" style="margin-left: 8px;"
                                                             @click="getoptions">
                                                            跳转
                                                        </div>
                                                    </div>
                                                </el-select>
                                            </div>
                                        </div>
                                    </el-form-item>
                                    <el-form-item label=""
                                                  v-if="rightData.media_type && rightData.media_type!='text' && rightData.media_type!='link'">
                                        <div style="color: #666;">如果没有数据，请去公众号添加</div>
                                    </el-form-item>
                                </div>
                                <div v-if="rightData.type=='miniprogram'">
                                    <el-form-item label="AppId">
                                        <el-input v-model="rightData.appid" @input="()=>{this.$forceUpdate();}"></el-input>
                                    </el-form-item>
                                    <el-form-item label="小程序路径">
                                        <div class="select-tip">
                                            <el-input v-model="rightData.pagepath" @input="()=>{this.$forceUpdate();}"></el-input>
                                        </div>
                                    </el-form-item>
                                    <el-form-item style="margin-top:-20px">
                                        <div class="select-tip">
                                            <div class="tip" v-if="rightData.type=='view'">点击该菜单会跳到页面链接</div>
                                            <div class="tip" v-if="rightData.type=='miniprogram'">小程序路径不可用时跳转页面链接</div>
                                        </div>
                                    </el-form-item>
                                </div>
                                <el-form-item style="margin-top:-20px" v-if="rightData.type=='view'">
                                    <div class="select-tip">
                                        <div class="tip" v-if="rightData.type=='view'">点击该菜单会跳到页面链接</div>
                                        <div class="tip" v-if="rightData.type=='miniprogram'">小程序路径不可用时跳转页面链接</div>
                                    </div>
                                </el-form-item>
                                <div v-if="rightData.type=='view' || rightData.type=='miniprogram'">
                                    <el-form-item label="页面链接">
                                        <div class="select-tip">
                                            <input type="hidden" class="hidden"  v-model="rightData.url">
                                            <el-input v-model="rightData.url" placeholder="以http或者https开头的网址" @input="()=>{this.$forceUpdate();}"></el-input>
                                        </div>
                                    </el-form-item>
                                </div>

                            </div>
                        </el-form>
                    </div>
                </div>
                <div v-else class="frist-show">
                    点击左侧菜单进行编辑操作
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    var wechatMenuVM = new Vue({
        el: "#wechatMenu",
        data: {
            params: JSON.parse('<?php echo addslashes($dataset);?>'),
            menuData: [],
            rightData: {},
            selectedIndex1: null,
            selectedIndex2: null,
            selectLevel: null,
            rightShow: false,
            menuTitle: '',
            edit_id: null,
            optType: 'edit',
            options: [],
            selectLimit: 6,
            selectOffset: 0,
            selectCurrentPage: 1,
            selectTotalPage: 0,
            detailForm: {
                type: '',
                content_id: {},
                content: {},
                content_title: ''
            }
        },
        mounted() {
            this.getmenuData();
        },
        methods: {
            typeChange() {
                this.getoptions()
                this.rightData.media_id = "";
            },
            selectChange(val) {
                if (this.rightData.media_type == 'news') {
                    let num = 0
                    this.options.forEach(i => {
                        if (i.media_id == val) {
                            num++
                        }
                    })
                    if (num > 1) {
                        this.rightData.media_id = ''
                        $.messager.alert('提示','不支持选择多条图文消息','warning');
                        return false;
                    }
                }
            },
            getoptions() {
                let that = this;
            },
            selectSizeChange(val) {
                this.selectOffset = 0;
                this.selectLimit = val;
                this.selectCurrentPage = 1;
                this.getoptions();
            },
            selectCurrentChange(val) {
                this.selectOffset = (val - 1) * 6;
                this.selectLimit = 6;
                this.selectCurrentPage = 1;
                this.getoptions();
            },
            getmenuData() {
                var that = this;
                if (that.params) {
                    if(that.params.id){
                        that.optType = 'edit';
                        that.edit_id = that.params.id;
                        that.menuTitle = that.params.name;
                        that.menuData = that.params.content;
                        that.menuData.forEach(i => {
                            i.selected = false;
                            i.show = false;
                            if (!i.appid) {
                                i.appid = '';
                                i.pagepath = '';
                            }
                            this.$set(i, 'media_type', i.key ? i.key.split('|')[0] : '')
                            this.$set(i, 'media_id', i.key ? i.key.split('|')[1] : '')
                            if (i.sub_button) {
                                i.sub_button.forEach(j => {
                                    j.selected = false;
                                    if (!j.appid) {
                                        j.appid = '';
                                        j.pagepath = '';
                                    }
                                    this.$set(j, 'media_type', j.key ? j.key.split('|')[0] : '')
                                    this.$set(j, 'media_id', j.key ? j.key.split('|')[1] : '')
                                })
                            } else {
                                i.sub_button = []
                            }
                        })
                    }else{
                        that.optType = 'add';
                        that.menuData = []
                    }
                }
            },
            changeRadio(e) {
                if (e == 'click') {
                    this.rightData.url = "";
                    this.rightData.appid = "";
                    this.rightData.pagepath = "";
                } else {
                    this.rightData.key = ''
                }

                this.$forceUpdate();
            },
            menuSelect(index1, index2) {
                this.selectedIndex1 = index1;
                this.selectedIndex2 = index2;
                this.rightShow = true;
                this.menuData.forEach(i => {
                    i.selected = false;
                    i.show = false;
                    if (i.sub_button) {
                        i.sub_button.forEach(j => {
                            j.selected = false;
                        })
                    }
                });
                this.menuData[index1].show = true;
                //选择1
                if (index2 == null) {
                    this.selectLevel = 1;
                    this.menuData[index1].selected = true;
                    this.menuData[index1].show = true;
                    this.rightData = this.menuData[index1];
                } else {
                    this.selectLevel = 2;
                    this.menuData[index1].sub_button[index2].selected = true;
                    this.rightData = this.menuData[index1].sub_button[index2];
                }
                if (this.rightData.media_type) {
                    this.getoptions();
                }
            },
            addMenu(index, level) {
                //右侧显示
                this.rightShow = true;
                this.selectLevel = level;
                if (index != null) {
                    this.selectedIndex1 = index;
                    this.menuData.forEach(i => {
                        i.selected = false;
                        if (i.sub_button) {
                            i.sub_button.forEach(j => {
                                j.selected = false;
                            })
                        }
                    });
                    this.menuData[index].sub_button.push({
                        name: '',
                        type: 'view',
                        selected: true,
                        url: '',
                        appid: '',
                        pagepath: '',
                        media_type: '',
                        media_id: '',
                    })
                    this.rightData = this.menuData[index].sub_button[this.menuData[index].sub_button.length - 1];
                    this.selectedIndex2 = this.menuData[index].sub_button.length - 1;
                } else {
                    this.menuData.forEach(i => {
                        i.selected = false;
                        i.show = false;
                    });
                    this.menuData.push({
                        name: '',
                        selected: true,
                        show: true,
                        type: 'view',
                        url: '',
                        appid: '',
                        pagepath: '',
                        sub_button: [],
                        media_type: '',
                        media_id: '',
                    })
                    this.selectedIndex1 = this.menuData.length - 1;
                    this.rightData = this.menuData[this.menuData.length - 1];
                }
            },
            delMenu() {
                if (this.selectedIndex2 != null) {
                    this.menuData[this.selectedIndex1].sub_button.splice(this.selectedIndex2, 1);
                    if (this.menuData[this.selectedIndex1].sub_button.length > 0) {
                        if (this.selectedIndex2 == 0) {
                            this.menuData[this.selectedIndex1].sub_button[0].selected = true;
                            this.rightData = this.menuData[this.selectedIndex1].sub_button[0];
                        } else {
                            this.menuData[this.selectedIndex1].sub_button[this.selectedIndex2 - 1].selected = true;
                            this.rightData = this.menuData[this.selectedIndex1].sub_button[this.selectedIndex2 - 1];
                            this.selectedIndex2--
                        }
                    } else {
                        this.rightData = {};
                        this.rightShow = false;
                    }
                } else {
                    this.menuData.splice(this.selectedIndex1, 1);
                    if (this.menuData.length > 0) {
                        if (this.selectedIndex1 == 0) {
                            this.menuData[0].selected = true;
                            this.menuData[0].show = true;
                            this.rightData = this.menuData[0];
                        } else {
                            this.menuData[this.selectedIndex1 - 1].selected = true;
                            this.menuData[this.selectedIndex1 - 1].show = true;
                            this.rightData = this.menuData[this.selectedIndex1 - 1];
                            this.selectedIndex1--
                        }

                    } else {
                        this.rightData = {};
                        this.rightShow = false;
                    }
                }
            },
            menuHide() {
                this.selectedIndex1 = null;
                this.selectedIndex2 = null;
                this.menuData.forEach(i => {
                    i.selected = false;
                    i.show = false;
                    if (i.sub_button.length > 0) {
                        i.sub_button.forEach(j => {
                            j.selected = false;
                        })
                    }
                });
                this.rightShow = false;
            },
            menuShow() {
                this.rightShow = true;
            },
            submitData() {
                let errObj = {
                    'err_id': 0,
                    'err_msg': ''
                };
                let that = this;
                if (that.menuTitle == '') {
                    $.messager.alert('提示', '请输入菜单名称', 'warning');
                    return false;
                }
                if (that.menuData.length == 0) {
                    $.messager.alert('提示', '请添加菜单内容', 'warning');
                    return false;
                }
                let savemenuData = JSON.parse(JSON.stringify(that.menuData))
                savemenuData.forEach(i => {
                    delete i.show;
                    delete i.selected;
                    if (i.sub_button.length > 0) {
                        delete i.url;
                        delete i.appid;
                        delete i.pagepath;
                        delete i.type;
                        delete i.key;
                        delete i.media_type;
                        delete i.media_id;
                        i.sub_button.forEach(j => {
                            delete j.selected;
                            switch (j.type) {
                                case 'view':
                                    delete j.appid;
                                    delete j.pagepath;
                                    delete j.media_type;
                                    delete j.media_id;
                                    if(j.url == '' || !IsURL(j.url)){
                                        errObj.err_id = 99;
                                        errObj.err_msg = '网址不能为空或格式不对！';
                                    }
                                    break;
                                case 'click':
                                    delete j.appid;
                                    delete j.pagepath;
                                    delete j.url;
                                    let type = j.media_type;
                                    let id = j.media_id
                                    this.$set(j, 'key', type + '_' + id)
                                    break;
                                case 'miniprogram':
                                    delete j.media_type;
                                    delete j.media_id;
                                    if(j.url == '' || !IsURL(j.url)){
                                        errObj.err_id = 99;
                                        errObj.err_msg = '网址不能为空或格式不对！';
                                    }
                                    break;
                            }
                        })
                    } else {
                        delete i.sub_button;
                        if (i.type) {
                            switch (i.type) {
                                case 'view':
                                    delete i.appid;
                                    delete i.pagepath;
                                    delete i.media_type;
                                    delete i.media_id;
                                    if(i.url == '' || !IsURL(i.url)){
                                        errObj.err_id = 99;
                                        errObj.err_msg = '网址不能为空或格式不对！';
                                    }
                                    break;
                                case 'click':
                                    delete i.appid;
                                    delete i.pagepath;
                                    delete i.url;
                                    let type = i.media_type
                                    let id = i.media_id
                                    this.$set(i, 'key', type + '_' + id)
                                    break;
                                case 'miniprogram':
                                    delete i.media_type;
                                    delete i.media_id;
                                    if(i.url == '' || !IsURL(i.url)){
                                        errObj.err_id = 99;
                                        errObj.err_msg = '网址不能为空或格式不对！';
                                    }
                                    break;
                            }
                        }
                    }
                })
                if(errObj.err_id === 0){
                    let postData = {
                        'name':that.menuTitle,
                        'content': that.menuData,
                    };
                    if(that.optType === 'edit'){
                        postData.id = that.params.id;
                    }
                    $.post('/admin/wechatmenu/' + that.optType, postData, function(data){
                        if(data.ret===0){
                            $.messager.show({
                                title:'提示',
                                msg:data.msg,
                                timeout:3000,
                                showType:'slide'
                            });
                            $("#wechatMenuManageDlg").dialog('close');
                            $("#wechatMenuManage").datagrid('load', {keywords:''});
                        }else{
                            $.messager.alert('提示',data.msg,'warning');
                        }
                    });
                }else{
                    $.messager.alert('提示', errObj.err_msg, 'warning');
                }

            },
        },
        watch: {
            rightData: {
                handler: function (newVal) {
                    if (this.selectLevel == 1) {
                        let name = newVal.name;
                        let num = 0;
                        for (var i = 0; i < name.length; i++) {
                            if (name[i].charCodeAt() >= 20 && name[i].charCodeAt() <= 127) {
                                num++
                            } else {
                                num += 2
                            }
                            if (num > 8) {
                                newVal.name = newVal.name.substr(0, i)
                            }
                        }
                    } else if (this.selectLevel == 2) {
                        let name = newVal.name;
                        let num = 0;
                        for (var i = 0; i < name.length; i++) {
                            if (name[i].charCodeAt() >= 20 && name[i].charCodeAt() <= 127) {
                                num++
                            } else {
                                num += 2
                            }
                            if (num > 16) {
                                newVal.name = newVal.name.substr(0, i)
                            }
                        }
                    }
                },
                deep: true
            }
        }
    });
    $('#wechatMenuEditsubmit').click(function(data){
        wechatMenuVM.submitData();
    })
    function IsURL(str_url){
        var strRegex = "^((https|http)?://)"
            + "(([0-9]{1,3}\.){3}[0-9]{1,3}" // IP形式的URL- 199.194.52.184
            + "|" // 允许IP和DOMAIN（域名）
            + "([0-9a-z_!~*'()-]+\.)*" // 域名- www.
            + "([0-9a-z][0-9a-z-]{0,61})?[0-9a-z]\." // 二级域名
            + "[a-z]{2,6})" // first level domain- .com or .museum
            + "(:[0-9]{1,4})?" // 端口- :80
            + "((/?)|" // a slash isn't required if there is no file name
            + "(/[0-9a-z_!~*'().;?:@&=+$,%#-]+)+/?)$";
        var re=new RegExp(strRegex);
        if (re.test(str_url)){
            return true;
        }else{
            return false;
        }
    }
</script>
<style>
    .zindex_popper{
        z-index: 20000 !important;
    }
    #wechatMenu {
        height: 626px;
        background: #fff;
        border-radius: 6px;
        font-size: 14px;
        padding: 0 20px;
        color: #444;
    }

    #menu<?php echo $uniqid;?> *{
        -webkit-box-sizing: border-box !important;
        -moz-box-sizing: border-box !important;
        box-sizing: border-box !important;
    }

    .wechat-menu-title {
        height: 40px;
        line-height: 40px;
        font-weight: 600;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .wechat-menu-body {
        height: 575px;
        background: #F2F2F6;
        border-radius: 6px;
        padding: 15px 20px;
        display: flex;
    }

    .body-left {
        width: 284px;
        height: 544px;
        background: #fff;
        border: 1px solid #E7E7EB;
        margin-right: 30px;
        padding-top: 494px;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        position: relative;
    }

    .left-bottom {
        position: relative;
        height: 48px;
        display: flex;
        border-top: 1px solid #E7E7EB;
    }

    .left-tip {
        color: #999;
        height: 40px;
        line-height: 40px;
        text-align: center;
        width: 100%;
        position: absolute;
        top: 100px;
    }

    .wechat-menu-icon {
        width: 40px;
        border-right: 1px solid #E7E7EB;
    }

    .wechat-menu-item {
        flex: 1;
        display: flex;
    }

    .wechat-menu-item-add {
        flex: 1;
    }

    .wechat-menu-add-body {
        display: none;
        position: absolute;
        bottom: 60px;
    }

    .wechat-menu-item-add-2 {
        width: 82px;
        height: 44px;
        border: 1px solid #E7E7EB;
        border-bottom: none;
        line-height: 42px;
        text-align: center;
        color: #666;
    }

    .wechat-menu-item-add-2s {
        border-left: none;
        border-right: none;
        border-top: none;
        background: url('/static/images/wechat/add-btn.png');
    }

    .body-right {
        flex: 1;
        border-radius: 6px;
    }

    .body-right-content {
        background: #fff;
        height: 544px;
    }

    .right-title {
        height: 50px;
        line-height: 50px;
        border-bottom: #E7E7EB 1px solid;
        padding: 0 20px;
        display: flex;
        justify-content: space-between;
    }

    .frist-show {
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        background: #fff;
        height: 544px;
    }

    .delete-btn {
        color: #E74C3C;
    }

    .select-body {
        padding: 20px 26px;
    }

    .display-flex {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .draggable-item {
        width: 82px;
        border-right: #E7E7EB 1px solid;
    }

    .wechat-menu-active {
        border: 1px solid #7438D5;
        color: #7438D5;
    }

    .wechat-menu-add-show {
        display: block;
    }

    i {
        font-size: 18px;
    }

    .el-form-item {
        margin-bottom: 20px;
    }

    .el-form-item__content {
        line-height: 34px;
    }

    .el-form-item__label {
        color: #444;
        padding-right: 30px;
        line-height: 34px;
        font-weight: 500;
        margin-right: 0;
    }

    .el-input__inner {
        height: 34px;
        line-height: 34px;
        flex: 1;
    }

    /* radio */
    #wechatMenu .el-radio{
        padding: 3px 0;
    }
    .el-radio__inner:hover,
    .el-input__inner:hover,
    .el-radio__inner:focus,
    .el-input__inner:focus {
        border-color: #7438D5;
    }

    .el-radio__input.is-checked+.el-radio__label {
        color: #7438D5;
    }

    .el-radio__input.is-checked .el-radio__inner {
        border-color: #7438D5;
        background: #7438D5;
    }

    .cursor-pointer {
        cursor: pointer;
    }

    .save-item {
        display: flex;
        justify-content: flex-end;
        height: 50px;
        align-items: center;
    }

    .public-btn {
        width: 88px;
        height: 36px;
        line-height: 36px;
        text-align: center;
        color: #fff;
        background: #7438D5;
        border-radius: 18px;
    }

    .seve-btn {
        border: 1px solid #7438D5;
        margin-right: 30px;
        background: #F2F2F6;
        color: #7438D5;
    }

    .el-input {
        /* width: 400px; */
        flex: 1;
    }

    .select-tip {
        display: flex;
        align-items: center;
    }

    .tip {
        color: #999;
        font-size: 12px;
    }

    .select-url {
        width: 98px;
        height: 32px;
        line-height: 32px;
        text-align: center;
        background: #EAE4F5;
        border: 1px solid #B092E1;
        border-radius: 4px;
        margin-right: 30px;
        color: #7438D5;
    }

    .left-tip i {
        font-size: 8px !important;
    }

    .one-ellipsis {
        display: block;
        /* width: 130px; */
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        padding: 0 5px;
    }

    .el-select {
        width: 100%;
    }

    .el-select-dropdown__item.selected {
        color: #7438D5;
    }

    .ellipsis-item {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    [v-cloak] {
        display: none
    }
</style>